<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <el-image :src="userIcon(userInfo.icon)" fit="cover" style="height: 40px; width: 40px;">
          <template #placeholder>
            <el-icon><icon-picture /></el-icon>
          </template>
        </el-image>
        <h3>欢迎回来 {{ userInfo.user_name }}，{{ welcomeMessage }}</h3>
      </div>
    </template>
    <div class="content">
      <el-upload
        :auto-upload="true"
        :show-file-list="false"
        :action="upload_url"
        name="avatar"
        :on-success="onUploadSuccess"
      >
        <el-avatar v-if="userIcon(userInfo.icon)" :src="userIcon(userInfo.icon)" shape="square" :size="150" fit="fill"/>
        <i v-else class="el-icon-plus avatar-uploader-icon"/>
      </el-upload>
      <el-form :inline="true" :model="userInfo" label-position="right" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="userInfo.user_name" disabled />
        </el-form-item>
        <el-form-item label="邮  箱">
          <el-input v-model="userInfo.email" disabled />
        </el-form-item>
        <el-form-item label="昵  称">
          <el-input v-model="userInfo.nick_name" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userInfo.phone" />
        </el-form-item>
        <el-form-item label="性  别">
          <el-select v-model="userInfo.gender" placeholder="请选择性别" class="select">
            <el-option v-for="(value, key) in ['未知', '女性', '男性']" :key="key" :value="key" :label="value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="warning" @click="submitChange">修改信息</el-button>
    </div>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { Message } from 'element-ui'
import { changeUserInfo } from '@/api/user'
import { transformURL } from '@/utils/curl'
import { timeToString } from '@/utils/common'

export default {
  name: 'UserSelf',
  data() {
    return {
      userInfo: {}
    }
  },
  mounted() {
    this.$set(this, 'userInfo', this.$store.state.user.userInfo)
  },
  computed: {
    ...mapGetters(['name']),
    upload_url() { return transformURL('/api/user/upload/') },
    welcomeMessage: function() { return timeToString() }
  },
  methods: {
    userIcon: function(icon) {
      return icon ? transformURL(icon) : 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'
    },
    submitChange: function() {
      const { nick_name, phone, icon } = this.userInfo
      let gender = ''
      if (typeof this.userInfo.gender !== 'number') gender = ['未知', '女性', '男性'].indexOf(this.userInfo.gender)
      else gender = this.userInfo.gender
      changeUserInfo({ nick_name, phone, gender, icon }).then(resp => {
        if (resp.code === 200) Message.success(resp.message)
        else Message.error(resp.message)
      })
    },
    onUploadSuccess: function(response, file, fileList) {
      this.userInfo.icon = response.data.url
      Message.success(response.message)
    }
  }
}
</script>

<style scoped>
.el-card {
  height: 96%;

  .card-header {
    display: flex;
    align-items: center;

    .el-image {
      height: 40px;
      margin-right: 30px;
    }
  }
}

::v-deep .el-card__body {
  height: 80%;
  padding-top: 0px;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  .el-upload {
    height: 150px;
    width: 150px;
  }

  .el-form {
    width: 80%;
    margin: 0 auto;
    .select {
      width: 90%;
    }
  }

  .el-button {
    width: 200px;
  }

}
</style>
